import React, {Component,} from 'react'
import {withRouter,} from "react-router-dom"
import {WhiteSpace, WingBlank} from "antd-mobile";
import PlanItem from "./plan_item/plan_item";
import './plan.css'
import {getPlanListReq} from "../../../../../apis/goApis";

const free = '免费'
const charge = '收费'
const time = '时间'
const accuracy = '准确率'
const typeParamsValueMapper = {
    [free]: 1,
    [charge]: 2,
    [time]: 3,
    [accuracy]: 4,
}

export const cleanPlanData = (planData) => {
    const Tags = [
        '日乙',
        '大小球',
    ]
    const markToTags = (mark) => {

        const m = mark
        const b = m.toString(2)
        const l = Tags.length
        let markString = ''
        if (l > b.length) {
            markString += '0'.repeat(l - b.length)
            markString += b
        } else {
            markString = b
        }

        // const mark = user.U.Mark.toString(2).split().reverse().join()
        const arr = []
        markString = markString.split('').reverse().join('')
        for (let i = 0; i < markString.length; i++) {
            let char = markString[i]
            if (Number(char) === 1) {
                let key = i
                let value = i
                let label = Tags[i]
                arr.push({key, value, label,})
            }
        }
        return arr

    }
    // let [win, total] = planData.Rightratestr.split('/').map(int => parseInt(int))
    // const [total, win,] = [...planData.Rightratestr,]
    const clean = {
        id: planData.Id,
        icon: planData.Avatar,
        name: planData.Name,
        // record: {win: win, total: total,},
        goodAt: planData.Goodat || [],
        accuracy: planData.Rightrate,
        read: planData.Zannum,
        reason: {
            title: planData.Reasontitle,
            desc: planData.Reason,
        },
        price: planData.Price,
        free: planData.Price === 0,
        finished: planData.Result === 0, // 0 结果还没出来 1 不正确 2 正确
        right: planData.Result === 1,
        wrong: planData.Result === 2,
        yuceKey: planData.Yucestyle,
        rateArray: planData.Yuce,
        ...planData,
    }
    return clean

}

const subTabs = [free, charge, time, accuracy,]

class Plan extends Component {
    constructor(props) {
        super(props)
        this.matchId = this.props.match.params.gameId

        this.state = {
            p: 0,
            key: free,
            list: [],
            end: false,
        }
    }

    componentDidMount() {
        this.get()
    }

    get = () => {

        const Namiid = parseInt(this.matchId)
        const Mode = typeParamsValueMapper[this.state.key]
        const Limit = 10
        const Offset = this.state.p * Limit
        getPlanListReq({
            Namiid,
            Mode,
            Offset,
            Limit,
        }).then((resp) => {
            const list = resp.data.ok.map(data => cleanPlanData(data))
            this.setState({
                list,
                end: list.length < 10,
            })
            this.props.setContentCtn(this.ctnContent, () => this.props.bindScrollEvent(this.getNext()))
        })
        // let list = []
        // for (let i = 0; i < 20; i++) {
        //     list.push(item)
        // }

    }

    getNext() {
        let end = this.state.end
        if (end === false) {
            this.setState({
                p: this.state.p + 1,
            }, () => this.get())
        }
    }

    onSubTabClick = (tab) => {
        this.setState({
            key: tab,
            list: [],
            p: 0,
            end: false,
        }, () => {
            this.get()
        })
    }

    render() {

        const list = this.state.list
        const listTemplate = <div>
            {list.map((plan, index) => <PlanItem key={index} planDate={plan}/>)}
        </div>

        return <div
            ref={el => this.ctnContent = el}
            style={{position: 'relative',}}
        >
            <div className="pd-12 flex-space-between plan-item-header" style={{zIndex: 2,}}>
                <div>
                    <p>方案推荐</p>
                </div>
                <div className='flex'>
                    {subTabs.map((tab, index) => {
                        const last = index === subTabs.length - 1
                        const gap = <span
                            className="gray-text pd-lr-6"
                        >|</span>
                        return <div
                            key={index}
                            onClick={() => this.onSubTabClick(tab)}
                        >
                            <span
                                className="gray-text"
                                style={{color: this.state.key === tab ? '#FFA500' : ''}}
                            >{tab}</span>
                            {last ? null : gap}
                        </div>
                    })}
                </div>
            </div>
            <div>
                {listTemplate}
            </div>
        </div>
    }
}

export default withRouter(Plan)